<template>
  <div class="pageContainer">
    <!--商品明细-->
    <el-row class="orderDetails">
      <div style="border:1px solid #ccc;margin-bottom:10px">
          <!--商品信息-->
          <el-table :data="productDetailsData" :size="size" style="width: 100%" align="center" header-align="center" :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}" @selection-change="handleSelectionChangeProduct" stripe>
            <el-table-column type="index" label="行号" width="80"></el-table-column>
            <el-table-column prop="goodsImgUrl" label="商品主图" width="100">
              <template slot-scope="scope">
                <img :src="scope.row.goodsImgUrl" height="40px" width="40px"/>
              </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="120"></el-table-column>
            <el-table-column prop="productCode" label="商品编码" width="120"></el-table-column>
            <!-- <el-table-column prop="packageNumber" label="套餐编号" width="80"></el-table-column> -->
            <!-- <el-table-column prop="packageName" label="套餐名" width="80"></el-table-column> -->
            <el-table-column prop="propertyName" label="规格属性" width="120"></el-table-column>
            <el-table-column prop="ThirdPartyNumber" label="第三方编码" width="120"></el-table-column>
          <!--  <el-table-column prop="" label="商户内码" width="80"></el-table-column> -->
             <el-table-column prop="unitName" label="主计量单位" width="120">
              <!-- <template slot-scope="scope">
                <span>件</span>
              </template> -->
            </el-table-column>
              <el-table-column prop="quantity" label="购买数量" width="120">
              <!-- <template slot-scope="scope">
                <span>1</span>
              </template> -->
            </el-table-column>
            <!-- <el-table-column prop="goodsNumber" label="货号" width="80"></el-table-column> -->
            <!-- <el-table-column prop="productBarCode" label="产品条码" width="80"></el-table-column> -->
            <!-- <el-table-column prop="orderingUnit" label="订购单位" width="80">
              <template slot-scope="scope">
                <span>件</span>
              </template>
            </el-table-column> -->
            <!-- <el-table-column prop="orderQuantity" label="订购数量" width="80">
              <template slot-scope="scope">
                <span>1</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="quantityShipped" label="已发货数量" width="120"></el-table-column>
            <!-- <el-table-column prop="deliveryWarehouse" label="发货仓库" width="120"></el-table-column> -->
          <!--   <el-table-column prop="discountCommodityPrice" label="商品会员折扣" width="120"></el-table-column> -->
            <!-- 单价 -->
             <el-table-column label="总金额" header-align="center" align="center">
              <el-table-column prop="transferDeliverPrice" label="零售价单价" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="totalRetailAmount" label="零售总金额" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="integralUnitPrice" label="积分单价" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="totalAmountOfPoints" label="积分总金额" header-align="center" align="center" width="120">
              </el-table-column>
            </el-table-column>
           <!--  <el-table-column label="单价" header-align="center" align="center">
              <el-table-column prop="transferDeliverPrice" label="零售价单价" header-align="center" align="center">
              </el-table-column>
              <el-table-column prop="integralPrice" label="积分单价" header-align="center" align="center">
              </el-table-column>
            </el-table-column> -->
            <el-table-column label="活动优惠" header-align="center" align="center">
              <el-table-column prop="makeUpAGroup" label="拼团" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="seckill" label="秒杀" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="reduction" label="立减" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="totalDiscountAmount" label="优惠活动总金额" header-align="center" align="center" width="150">
              </el-table-column>
            </el-table-column>

            <el-table-column label="卡券优惠" header-align="center" align="center">
              <el-table-column prop="commodityCoupon" label="商品券" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="coupon" label="优惠券" header-align="center" align="center" width="120">
              </el-table-column>
              <el-table-column prop="cardCouponDiscount" label="卡券优惠总金额" header-align="center" align="center" width="150">
              </el-table-column>
            </el-table-column>

            <el-table-column label="支付立减" header-align="center" align="center">
              <el-table-column prop="paymentReduction" label="支付立减" header-align="center" align="center" width="120">
              </el-table-column>
            </el-table-column>
              <!-- <el-table-column label="优惠单价" header-align="center" align="center">
              <el-table-column prop="memberDiscount" label="会员折扣优惠" header-align="center" align="center">
              </el-table-column>
              <el-table-column prop="groupBooking" label="拼团" header-align="center" align="center">
              </el-table-column>
              <el-table-column prop="discountCoupon" label="优惠券" header-align="center" align="center">
              </el-table-column>
              <el-table-column prop="coupon" label="卡券" header-align="center" align="center">
              </el-table-column>
            </el-table-column> -->
            <el-table-column prop="amountActuallyPaid" label="实付总金额" width="120"></el-table-column>
            <!--  实付总积分-->
            <el-table-column prop="paidPoints" label="实付总积分" width="120"></el-table-column>
            <!-- <el-table-column prop="salesUnitPrice" label="销售单价" width="120"></el-table-column>
            <el-table-column prop="purchaseUnitPrice" label="购买单价" width="120"></el-table-column>
            <el-table-column prop="purchaseAmount" label="购买金额" width="120"></el-table-column>
            <el-table-column prop="preferentialAmountOfPriceChange" label="改价优惠金额" width="120"></el-table-column>
            <el-table-column prop="alreadyTransferDeliverNum" label="已转交货单数量" width="120"></el-table-column>
            <el-table-column prop="waitTransferDeliverNum" label="待转交货单数量" width="120"></el-table-column>
            <el-table-column prop="saleUnitPrice" label="销售单价" width="120"></el-table-column>
            <el-table-column prop="discountUnitPrice" label="优惠单价" width="120"></el-table-column>
            <el-table-column prop="buyUnitPrice" label="购买单价" width="120"></el-table-column>
            <el-table-column prop="expressUnitFee" label="物流平摊单价" width="120"></el-table-column>
            <el-table-column prop="actualPayTotalAmount" label="实付总金额" width="120"></el-table-column>
            <el-table-column prop="goodsNum" label="商品数量" width="120"></el-table-column>
            <el-table-column prop="Remarks" label="辅料备注" width="120"></el-table-column>
            <el-table-column prop="rowState" label="行状态" width="120"></el-table-column> -->

          </el-table>

          <!--商品信息分页-->
          <el-row style="margin:10px 0">
            <el-col :span="8" :offset="16">
              <el-pagination
                layout="total, prev, pager, next, jumper,sizes"
                @current-change="handleCurrentChangeProductInfo"
                :current-page="orderGoodsPage.start"
                :page-size="orderGoodsPage.limit"
                :total="orderGoodsTotal"
                style="float:right;"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="handleSizeChangeProductInfo"
              ></el-pagination>
            </el-col>
          </el-row>
         <div>
         <!-- <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
            <span>商品会员折扣</span>
            <el-table
            :data="commodityMemberDiscount"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
              prop="promotionId"
              label="促销活动ID"
              sortable
              width="180">
            </el-table-column>
            <el-table-column
              prop="salesPromotionName"
              label="促销活动名称"
              sortable
              width="180">
            </el-table-column>
            <el-table-column
              prop="commodityName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="commodityCode"
              label="商品编码">
            </el-table-column>
              <el-table-column
              prop="skuId"
              label="主计量单位">
            </el-table-column>
              <el-table-column
              prop="participationNum"
              label="参与数量">
            </el-table-column>
            <el-table-column
              prop="promotionDiscountTotalAmount"
              label="优惠金额">
            </el-table-column>
            <el-table-column
              prop="promotionDiscountTotalAmount"
              label="平台分摊">
            </el-table-column>
            <el-table-column
              prop="promotionDiscountTotalAmount"
              label="商户分摊">
            </el-table-column>
            </el-table> -->
             <!--分页-->
          <!-- <el-row style="margin:10px 0">
            <el-col :span="8" :offset="16">
              <el-pagination
                layout="total, prev, pager, next, jumper,sizes"
                @current-change="handleCurrentChangeProductInfo1"
                :current-page="commodityMemberDiscountPage.start"
                :page-size="commodityMemberDiscountPage.limit"
                :total="commodityMemberDiscountTotal"
                style="float:right;"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="handleSizeChangeProductInfo"
              ></el-pagination>
            </el-col>
          </el-row>
         </div> -->
          <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
            <span>商品促销活动</span>
              <!-- :load="load" -->
            <el-table :data="tableData1" style="width: 100%" row-key="id" border lazy :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                prop="salesPromotion"
                label="促销活动ID"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="salesPromotionName"
                label="促销活动名称"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="tradeName"
                label="商品名称">
              </el-table-column>
              <el-table-column
                prop="tradeNumber"
                label="商品编码">
              </el-table-column>
               <el-table-column
                prop="unitOfMeasurement"
                label="主计量单位">
              </el-table-column>
               <el-table-column
                prop="numberOfParticipants"
                label="参与数量">
              </el-table-column>
              <el-table-column
                prop="preferentialAmount"
                label="优惠金额">
              </el-table-column>
              <el-table-column
              prop="platformAllocation"
              label="平台分摊">
            </el-table-column>
            <el-table-column
              prop="merchantApportionment"
              label="商户分摊">
            </el-table-column>
            </el-table>
          </div>
          </div>
      </div>
      <div>
      <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;border-bottom:1px solid #ccc">
          <span>卡券优惠</span>
          <el-table
          :data="tableData2"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column
            prop="preferentialActivities"
            label="优惠券活动ID"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="couponName"
            label="优惠券名称"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="couponNumber"
            label="劵码">
          </el-table-column>
          <el-table-column
            prop="commodityName"
            label="商品名称">
          </el-table-column>
            <el-table-column
            prop="commodityNumber"
            label="商品编码">
          </el-table-column>
           <el-table-column
                prop="unitOfMeasurement"
                label="主计量单位">
              </el-table-column>
               <el-table-column
                prop="numberOfParticipants"
                label="参与数量">
              </el-table-column>
              <el-table-column
                prop="preferentialAmount"
                label="优惠金额">
              </el-table-column>
              <el-table-column
              prop="platformAllocation"
              label="平台分摊">
            </el-table-column>
            <el-table-column
              prop="merchantApportionment"
              label="商户分摊">
            </el-table-column>
        </el-table>
      </div>
        <!--  :load="load" -->
      <div style="background-color:#f0f3f4;text-align:left;padding:10px 20px;font-weight:700;margin-bottom:30px;border-bottom:1px solid #ccc">
          <span>支付立减</span>
              <el-table
            :data="tableData3"
            style="width: 100%"
            row-key="id"
            border
            lazy
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

             <el-table-column
            prop="commodityName"
            label="商品名称">
          </el-table-column>
            <el-table-column
            prop="commodityNumber"
            label="商品编码">
          </el-table-column>
           <el-table-column
                prop="unitOfMeasurement"
                label="主计量单位">
              </el-table-column>
               <el-table-column
                prop="numberOfParticipants"
                label="参与数量">
              </el-table-column>
              <el-table-column
                prop="preferentialAmount"
                label="优惠金额">
              </el-table-column>
              <el-table-column
              prop="platformAllocation"
              label="平台分摊">
            </el-table-column>
            <el-table-column
              prop="merchantApportionment"
              label="商户分摊">
            </el-table-column>
        </el-table>
      </div>
      </div>

      <!--结算明细-->
      <div style="background-color:#fff;border:1px solid #ccc">
        <div style="padding:10px 20px;overflow:hidden;background-color:#e7ecee">
          <span style="font-weight:700;float:left">结算明细</span>
        </div>
        <div style="border-bottom:1px solid;">
          <!--1/3栏-->
          <div style="width:25%;float:left;border-bottom: 1px solid;">
            <!--第一列-->
            <div class="settlementDetails" style="border-right:1px solid;border-bottom:1px solid;">
              <br>
              <strong style="font-size:30px;">零售总价</strong>
            </div>
          <div style="height:240px">
               <span></span>
              <span>商品零售价金额合计: 233.00</span>
          </div>
          </div>
          <div style="width:25%;float:left;border-bottom: 1px solid;">
            <!--第二列-->
            <div class="settlementDetails" style="border-right:1px solid;border-bottom:1px solid;border-right:1px solid;">
                <br><strong style="font-size:30px;">优惠金额</strong>
            </div>
          <div style="border-right:1px solid;border-left:1px solid;height:240px">
              <span>商品零售价金额合计: -0.00</span><br><br>
              <span>商品优惠券优惠金额: -5.00</span><br><br>
              <span>商品单一促销优惠金额: -0.00</span><br><br>
              <span>商品卡券金额: -0.00</span><br>
              <el-divider></el-divider>
              <span>优惠金额合计： -5.00</span><br><br>
          </div>
          </div>
          <div style="width:15%;float:left;border-bottom: 1px solid;">
                    <!--第三列-->
            <div class="settlementDetails" style="border-bottom:1px solid;">
               <br><strong style="font-size:30px;">积分</strong>
            </div>
          <div style="height:240px;border-right:1px solid;">
              <span>积分合计: -0.00</span><br>
          </div>
          </div>

          <div style="width:15%;float:left;border-bottom: 1px solid;">
            <!--第一行-->
            <div class="settlementDetails" style="border-right:1px solid;border-bottom:1px solid;">
             <br> <strong style="font-size:30px;">运费</strong>
            </div>
          <div style="border-right:1px solid;border-left:1px solidl;height:240px">
              <span>运费: -0.00</span><br>
          </div>
          </div>
          <!--2/3栏-->
          <div style="width:20%;float:left;border-bottom: 1px solid;">
            <!--第一行-->
            <div class="settlementDetails" style="border-right:1px solid;border-bottom:1px solid;">
               <br> <strong style="font-size:30px;">营销费用</strong>
            </div>
            <div style="height:240px;">
              <span>平台分摊总金额: 120.00</span><br><br>
              <span>平台分摊总金额: 120.00</span><br><br>
          </div>
          </div>
        </div>
        <div style="text-align: left">
            <br><source >实付总金额: 零售总价 - 优惠金额 + 运费 = 233.00-5.00+9.00</source><br>
            <source>实付总积分: 500积分</source><br><br>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    orderNo: {
      type: String,
      default: ''
    },
  },

  data() {
    return {
      size: 'small',
      productCode: '',
      orderDetail: {},
      tableData: [],
     /*  tableData1: [], */
     tableData2:[{
      preferentialActivities:"20180038",
      couponName:"5元优惠券",
      couponNumber:"GS123421",
      commodityName:"男装 休闲九分裤(仿毛料) 407402",
      commodityNumber:"0284234898",
      unitOfMeasurement:"件",
      numberOfParticipants:"15",
      preferentialAmount:"5.00",
      platformAllocation:"300.00",
      merchantApportionment:"300.00",
     }],
       tableData1: [{
        salesPromotion:"2018353",
        salesPromotionName:"满1000减300男装",
        tradeName:"休闲九分裤(仿毛料)",
        tradeNumber:"4074020284234898",
        unitOfMeasurement:"件",
        numberOfParticipants:"15",
        preferentialAmount:"300.00",
        platformAllocation:"300.00",
        merchantApportionment:"300.00",
       },
       {
      salesPromotion:"2018354",
      salesPromotionName:"满500减80男装",
      tradeName:"休闲九分裤(仿毛料)",
      tradeNumber:"4074020284234898",
      unitOfMeasurement:"件",
      numberOfParticipants:"8",
      preferentialAmount:"80.00",
      platformAllocation:"80.00",
      merchantApportionment:"80.00",
       }],//商品促销活动
       tableData3:[{
        commodityName:"男装 休闲九分裤(仿毛料) 407402",
        commodityNumber:"0284234898",
        unitOfMeasurement:"件",
        numberOfParticipants:"15",
        preferentialAmount:"5.00",
        platformAllocation:"300.00",
        merchantApportionment:"300.00",
       }],
     /*  productDetailsData: [], */
      productDetailsData: [{
        goodsImgUrl:"",
        goodsName:"",
        productCode:"",
        propertyName:"",
        ThirdPartyNumber:"",
        unitName:"件",
        quantity:"2",
        quantityShipped:"2",
        transferDeliverPrice:"200.00",
        totalRetailAmount:"400.00",
        integralUnitPrice:"1000",
        totalAmountOfPoints:"2000",
        makeUpAGroup:"-5",
        seckill:"-6",
        reduction:"-5",
        totalDiscountAmount:"-16",
        coupon:"-5",
        commodityCoupon:"-5",
        cardCouponDiscount:"-10",
        paymentReduction:"-5",
        amountActuallyPaid:"(销售单价-会员折扣优惠-单一促销-拼团）*数量",
        paidPoints:"积分单价*数量",
      }],
      commodityMemberDiscount: [],                                                   // 商品明细列表
      orderGoodsPage: {
        'orderNo': '',
        'limit': 10,
        'start': 1
      },
       commodityMemberDiscountPage: {
        'orderNo': '',
        'limit': 10,
        'start': 1
      },                                        // 商品明细
      orderGoodsTotal: 0,
      commodityMemberDiscountTotal:0,
    }
  },

  mounted() {
    this.getOrderDetail()
    this.queryOrderGoodsQuery()
    this.queryDiscountPromotionDetailQuery()
  },

  methods: {
    // 订单详情
    getOrderDetail() {
      let this_ = this
      this_.utils.request.getOrderDetail({orderNo: this_.orderNo}, function (res) {
        if (res.code == '0000') {
          this_.orderDetail = res.data
        }
      })
    },

    // 订单商品明细分页
    queryOrderGoodsQuery() {
      let this_ = this
      this_.orderGoodsPage.orderNo = this_.orderNo
      this_.utils.request.queryOrderGoodsQuery(this_.orderGoodsPage, function (res) {
        if (res.code == '0000') {
        /*   this_.productDetailsData = res.data.rows */
          this_.orderGoodsTotal = Number(res.data.total)
        }
      })
    },

    // 商品明细复选框值
    handleSelectionChangeProduct(val) {
      this.multipleSelection = val
    },

    // 商品明细分页条数
    handleSizeChangeProductInfo(val) {
      this.orderGoodsPage.start = 1
      this.orderGoodsPage.limit = val
      this.queryOrderGoodsQuery()
    },

    // 商品明细分页当前页
    handleCurrentChangeProductInfo(val) {
      this.orderGoodsPage.start = val
      this.queryOrderGoodsQuery()
    },

    //商品折扣
     queryDiscountPromotionDetailQuery() {
      let this_ = this
      this_.commodityMemberDiscountPage.orderNo = this_.orderNo
      this_.utils.request.queryDiscountPromotionDetailQuery(this_.commodityMemberDiscountPage, function (res) {

        if (res.code == '0000') {
          this_.commodityMemberDiscount = res.data.rows[0]
          this_.commodityMemberDiscountTotal = Number(res.data.total)
        }
      })
    },
    // 商品明细分页条数
    handleSizeChangeProductInfo1(val) {
      this.commodityMemberDiscountPage.start = 1
      this.commodityMemberDiscountPage.limit = val
      this.queryDiscountPromotionDetailQuery()
    },

    // 商品明细分页当前页
    handleCurrentChangeProductInfo1(val) {
      this.commodityMemberDiscountPage.start = val
      this.queryDiscountPromotionDetailQuery()
    },

  },
}
</script>

<style lang="scss" scoped>
  .page {
    .pageContainer {
      background-color: #f0f3f4; //#f0f3f4

      .basicOrderInformation {
        margin-bottom: 20px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding-bottom: 10px;
        font-size: 16px;
        overflow: hidden;

        .orderIndex {
          float: left
        }

        .orderIndexList {
          text-align: left;
          margin-bottom: 10px;
          padding-left: 90px
        }
      }

      .orderDetails {
        border: 1px solid #ccc;
        background-color: #fff;

        .settlementDetails {
          text-align: left;
          margin-bottom: 10px;
          padding-left: 90px
        }

      }
    }
  }
</style>
